<template>
	<view class="outsize">
		<view style="display: flex;align-items: center;" class="frame">
			<view class="">
				<image :src="substance.faceUrl" mode="widthFix" style="width: 20vw;display: flex;align-items: center;">
				</image>
			</view>
			<view style="width: 100%;margin-left: 10px;">
				<view style="color: #FA0000;display: flex;align-items: center;">
					￥{{substance.price}}/
					<view style="font-size: 10px;">
						{{substance.payType}}
					</view>
				</view>
				<view style="font-size: 13px;margin: 4px 0;">
					<!-- 整租·花果园一期 -->
					{{substance.type == '0' ?'整租' : '合租'}}·{{substance.detailAddress}}
				</view>
				<view style="font-size: 12px;color: #999999;">
					{{substance.type == '0' ? substance.houseArea : substance.roomArea}}㎡
				</view>
			</view>
		</view>
		<view class="frame">
			<view style="letter-spacing: 1px;font-weight: 600;margin-top: 5px;display: flex;">
				看房地址
				<view style="font-size: 10px;display: flex;align-items: center;color: #777777;">
					(具体门牌号您可以在预约成功之后查看)
				</view>
			</view>
			<view class="lists">
				<view class='listcenter'>
					{{substance.detailAddress}}{{substance.address}}
				</view>
				<view style="width: 2px;background-color: #666666;height: 30px;">
				</view>
				<view>
					<u-copy :content="substance.detailAddress+substance.address">
						<button style="background-color:#FFDA00;color: #ffffff;font-size: 10px;">点击复制</button>
					</u-copy>
				</view>
			</view>
			<view style="letter-spacing: 1px;margin-top: 15px;font-size: 12px;color: #999999;"
				v-if="substance.isPhysicalKey=='电子密码'">
				注：该房源为动态密码锁，您可以在您预约的时间之内查看密码
			</view>
			<view style="letter-spacing: 1px;font-weight: 600;margin-top: 10px;font-size: 15px;"
				v-if="substance.isPhysicalKey=='实体钥匙'">
				钥匙存放门店地址
			</view>
			<view v-if="substance.isPhysicalKey=='实体钥匙'" class='lists'>
				<view class='listcenter'>
					{{substance.keyAddress}}
				</view>
				<view style="width: 2px;background-color: #666666;height: 30px;">
				</view>
				<view>
					<u-copy :content="substance.keyAddress">
						<button style="background-color:#FFDA00;color: #ffffff;font-size: 10px;">点击复制</button>
					</u-copy>
				</view>
			</view>
			<view style="letter-spacing: 1px;font-weight: 600;margin-top: 10px;font-size: 15px;"
				v-if="substance.isPhysicalKey=='实体钥匙'">
				钥匙存放门店电话
			</view>
			<view v-if="substance.isPhysicalKey=='实体钥匙'" class='lists'>
				<view class='listcenter'>
					{{substance.keyPassword}}
				</view>
				<view>
					<view @click="telephone(substance.keyPassword)">
						<u-icon name="phone-fill"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="frame" style="padding-top: 16px;fon">
			<view style="letter-spacing: 1px;font-weight: 600;">
				看房时间
			</view>
			<view class="">
				<!-- 看房日期 -->
				<view style="display: flex;justify-content: space-between;margin: 20px 0 12px;align-items: center;">
					<view style="font-size: 15px;">
						看房日期
					</view>
					<view @click="show=true">
						<u-input placeholder="请选择看房日期" disabled='true' disabledColor='#ffffff' border='none'
							inputAlign='right' v-model="calendar"></u-input>
					</view>
				</view>
			</view>
			<u-line color="#999999"></u-line>
			<view class="">
				<!-- 看房时间 -->
				<view style="display: flex;justify-content: space-between;margin: 16px 0 8px;align-items: center;">
					<view style="font-size: 15px;">
						看房时间
					</view>
					<view class="">
						<view @click="timeshow = true">
							<u-input placeholder="请选择看房时间" disabled='true' disabledColor='#ffffff' border='none'
								inputAlign='right' v-model="ontimes"></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20px;">
			<button style="background-color: #FFDA00;font-size: 15px;font-weight: 600;"
				@click="keepon(substance.id)">立即预约</button>
		</view>
		<u-calendar :maxDate="maxDate" :show="show" mode="single" @confirm="confirm" @close="show=false">
		</u-calendar>
		<u-datetime-picker hasInput :show="timeshow" mode="time" @cancel='timeshow=false' max-hour="21"
			@confirm='timeone'></u-datetime-picker>
		<!-- <view style="color: #999999;font-size: 12px;line-height: 23px;margin-top: 30px;">
			温馨提示<br />
			1、严禁将房屋的位置信息，房屋钥匙的联系人信息，房东信息透露，造成房源信息、房东私人泄露，给房东造成挽回不了的损失<br />
			2、看完房后，务必归还钥匙<br />
			3、需归还钥匙,若是智能钥匙需点击已归还<br />
			4、看房期间请保护环境卫生整洁干净<br />
			5、看房后请确认水电燃气门窗等是否关闭<br />
		</view> -->
		<u-modal :show="showing" :title="title" @confirm='closePopup'>
			<view class="slot-content">
				<rich-text :nodes="contenting"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue"
	import {
		get,
		post
	} from '@/serve/method.js'
	import {
		test
	} from '@/uni_modules/uview-plus';
	// 打电话
	const telephone = (item) => {
		uni.makePhoneCall({
			phoneNumber: item,
		});
	}
	// 最大可选日期的七天
	const done = new Date();
	const yearone = done.getFullYear();
	let monthone = done.getMonth() + 1;
	monthone = monthone < 10 ? `0${monthone}` : monthone;
	const dateone = done.getDate();

	const maxDate = `${yearone}-${monthone}-${dateone + 7}`;
	// 弹窗
	const showing = ref(false);
	const title = ref('温馨提示');
	const contenting = ref(`1、严禁将房屋的位置信息，房屋钥匙的联系人信息，房东信息透露，造成房源信息、房东私人泄露，给房东造成不可挽回的损失<br />
			2、看完房后，需归还钥匙，若是智能钥匙需点击已归还<br />
			3、看房期间请保护环境卫生整洁干净<br />
			4、看房后请确认水电燃气门窗等是否关闭<br />`);
	const closePopup = () => {
		showing.value = false
	}
	// 
	const userId = ref()
	// 继续
	const keepon = (id) => {
		if (test.isEmpty(calendar.value)) {
			return wx.showToast({
				title: '请选择看房日期',
				icon: 'none',
				duration: 2000
			})
		}
		if (test.isEmpty(ontimes.value)) {
			return wx.showToast({
				title: '请选择看房时间',
				icon: 'none',
				duration: 2000
			})
		}
		uni.getStorage({
			key: 'lifeData',
			success: function(res) {
				userId.value = res.data.vuex_user.userId
				let url = '/api/user/viewHouse'
				let one = calendar.value.substring(0, 4) + '年' + calendar.value.substring(5, 7) + '月' +
					calendar
					.value.substring(8, 10) + '日'
				let two = ontimes.value.substring(0, 2)
				let three = `${one} ${two}`
				post(url, {
					'houseId': id,
					'userId': userId.value,
					'viewHouseTimeStr': three,
					'state': 1
				}).then((res) => {
					console.log(res, '预约看房')
					uni.redirectTo({
						url: `/pages/mine/succer/succer?id=2`
					});
				})
			},
			fail: function(res) {
				if (res.errMsg == 'getStorage:fail data not found') {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			}
		})
	}
	// 时间
	const ontimes = ref()
	const timeone = (data) => {
		console.log(data.value, 999999)
		let one = '09: 00'
		if (data.value < one) {
			// console.log(8888)
			uni.showModal({
				title: '提示',
				content: '时间太早了,房东还在休息,九点之后才可以看房哟',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					}
				}
			});
		} else {
			timeshow.value = false
			ontimes.value = data.value
		}
	}
	const timeshow = ref(false);
	// 
	const calendar = ref()
	const show = ref(false);
	const confirm = (e) => {
		console.log(e);
		calendar.value = e[0]
		show.value = false
	};
	const ni = ref()
	onLoad((option) => {
		console.log(option.id)
		showing.value = true
		// ni.value = option
		findHouseById(option.id)
	})
	const substance = ref()
	const findHouseById = (houseId) => {
		let url = "/api/house/findHouseById";
		get(url, {
			id: houseId
		}).then(data => {
			console.log(data.data, 8888888)
			substance.value = data.data
		});
	}
</script>

<style scoped lang="scss">
	.lists {
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;

		.listcenter {
			width: 65vw;
			color: #999999;
			word-wrap: break-word;
			overflow-wrap: break-word;
			font-size: 13px;
		}
	}

	.outsize {
		background-color: #F2F2F2;
		padding: 13px 9px 0;
		width: calc(100vw - 18px);
		height: calc(100vh - 13px);

		.frame {
			width: calc(100% - 16px);
			background-color: #ffffff;
			padding: 8px 8px;
			margin-bottom: 14px;
			border-radius: 8px;
		}
	}
</style>